<template>
  <div class="form-data">
    <!-- 表单收集 -->
    <div class="my-data-detail-title" v-if="exportData.total > 0">
      表单收集
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="formTips"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
      <div class="btn-export-con">
        <span>{{curSiteData.time}}</span>
      </div>
    </div>
    <FormDataList></FormDataList>

    <!-- 提交表单数据 -->
    <div class="my-data-detail-title">
      提交表单数据
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="submitFoemData"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
    </div>
    <FormDataTable></FormDataTable>

    <!-- 抽奖结果 -->
    <div class="my-data-detail-title" v-if="isLottery">
      抽奖结果
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="formTips"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
      <div class="btn-export-con">
        <span>{{curSiteData.time}}</span>
      </div>
    </div>
    <div v-if="isLottery">
      <el-button @click.stop="onGetExportData">抽奖结果</el-button>
      <iframe src="" ref="iframe"></iframe>
    </div>
  </div>
</template>

<script>
  import FormDataList from '@/views/child/admin/adminData/FormDataList.vue';
  import FormDataTable from '@/views/child/admin/adminData/FormDataTable.vue';

  import {mapState, mapActions, mapGetters} from 'vuex'

  export default {
    setup () {
      return {
        // tips
        formTips: '表单数据下载',
        submitFoemData: '提交表单数据',
      }
    },
    props: ['site_id'],
    computed: {
      ...mapState({
        detailNavPrev: state => state.user.detailNavPrev,
        exportData: state => state.user.exportData,
        curSiteData: state => state.user.mySite4Data,
      }),
      ...mapGetters("user", {
        isLottery: "isLottery",
      }),
    },
    components: {
      FormDataList,
      FormDataTable,
    },
    beforeMount() {
      // 获取 表单收集 数据
      this.exportDataTotal({
        site_id: this.site_id,
        table: 'com_form',
      });
    },
    methods: {
      ...mapActions({
        exportDataTotal: 'user/exportDataTotal',
      }),
      onGetExportData(){
        // iframe 跳转页面 下载数据
        this.$refs.iframe.src = this.env.apiUrl + '/stat/expdata?site_id=' + this.exportData.site_id + '&table=com_lottery'
      },
    },
  }
</script>

<style lang="scss" scoped>
  iframe{
    display: none;
  }
</style>
